<template>
  <div class="add">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="130px"
             class="demo-ruleForm">
      <el-form-item label="库房名称" prop="repoName">
        <el-input size="small" v-model="ruleForm.repoName"></el-input>
      </el-form-item>
      <el-form-item label="库房编号" prop="repoCode">
        <el-input size="small"
                  :disabled="type === 'edit'"
                  v-model="ruleForm.repoCode"></el-input>
      </el-form-item>
      <el-form-item label="密集架数量">
        <el-input-number v-model="ruleForm.shelvingNum"
                         controls-position="right"
                         style="width: 100%"
                         :disabled="type === 'edit'"
                         :min="1"
                         :max="10000"></el-input-number>
      </el-form-item>
      <el-form-item label="每架的列数">
        <el-input-number v-model="ruleForm.columnNum"
                         controls-position="right"
                         style="width: 100%"
                         :disabled="type === 'edit'"
                         :min="1"
                         :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="每架的行数">
        <el-input-number v-model="ruleForm.rowNum"
                         controls-position="right"
                         style="width: 100%"
                         :disabled="type === 'edit'"
                         :min="1"
                         :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="库房地址">
        <el-input size="small" v-model="ruleForm.repoAddress"></el-input>
      </el-form-item>
      <el-form-item label="库房介绍">
        <el-input size="small" v-model="ruleForm.repoDesc"></el-input>
      </el-form-item>
      <el-form-item label="库房备注">
        <el-input size="small"
                  v-model="ruleForm.remark"
                  type="textarea"
                  show-word-limit
                  maxlength="200"
                  :autosize="autosize"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button :loading="saveLoading"
                   type="primary"
                   size="small"
                   @click="submitForm('ruleForm')">{{type === 'add' ? '提交' : '修改'}}</el-button>
        <el-button :loading="saveLoading" size="small" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addHouseList, editHouseList } from '../../../../../api/house/houseArchives'

export default {
  name: 'addHouse',
  props: {
    type: {
      type: String,
      default: ''
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      saveLoading: false,
      ruleForm: {
        repoName: '',
        repoCode: '',
        shelvingNum: '1',
        columnNum: '1',
        rowNum: '1',
        repoAddress: '',
        repoDesc: '',
        remark: ''
      },
      rules: {
        repoName: [
          {
            required: true, message: '请输入库房名称', trigger: 'blur'
          }
        ],
        repoCode: [
          {
            required: true, message: '请输入库房编号', trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    if (this.type === 'edit') {
      this.ruleForm = this.rowData
    }
  },
  watch: {
    rowData: {
      handler () {
        this.ruleForm = this.rowData
      },
      deep: true
    },
    type () {
      if (this.type === 'add') {
        this.ruleForm = {
          repoName: '',
          repoCode: '',
          shelvingNum: '1',
          columnNum: '1',
          rowNum: '1',
          repoAddress: '',
          repoDesc: '',
          remark: ''
        }
      } else {
        this.ruleForm = this.rowData
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          const request = this.type === 'add' ? addHouseList(this.ruleForm) : editHouseList(this.ruleForm)

          request.then(res => {
            this.$emit('handleSuccess')
            this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功')
            this.saveLoading = false
            this.resetForm()
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .add {
    padding-right: 65px;
  }
</style>
